<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8" /> 
   
    <script src="../js/json2.js"></script>
    <script src="../js/jsonlint.js"></script>
    <script src="../../jquery/js/jquery-1.8.0.min.js"></script>
    <script src="../../jquery/js/jquery-ui-1.8.23.custom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../jquery/css/theme/jquery-ui-1.8.23.custom.css" media="all">
      
    
    <script>
      window.onload = function () {
        document.getElementById("button").onclick = function () {
          try {
            var result = jsonlint.parse(document.getElementById("source").value);
            if (result) {
              document.getElementById("result").innerHTML = "JSON is valid!";
              document.getElementById("result").className = "pass";
              if (document.getElementById("reformat").checked) {
                document.getElementById("source").value = JSON.stringify(result, null, "  ");
              }
            }
          } catch(e) {
            document.getElementById("result").innerHTML = e;
            document.getElementById("result").className = "fail";
          }
        };
      }
    </script>
    <style>
      body {font-family: sans-serif;}
      #result {
        padding: 1em;
      }
      .pass {
        background-color: #efe;
        color: #393;
        border: 2px solid #393;
      }
      .fail {
        background-color: #fee;
        color: #933;
        border: 2px solid #933;
      }
      textarea { width: 100%; }
    </style>
</head> 
<body> 
    <textarea id="source" rows="20" cols="50" class="ui-widget-content"></textarea>
  <p>
    <button id="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only ui-button-text" style="padding: 10px;">Validate</button>
    <input type="checkbox" value="yes" id="reformat" checked="checked"/><label for="reformat">reformat JSON</label>
  </p>
  <h2>Results</h2>
  <pre id="result"></pre>
</body> 
</html> 
